<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if & v-else & v-show 实例练习</title>
    <script type="text/javascript" src="../assets/vue.js"></script>

</head>
<body>

<div id="app">
    <h3> {{message}}</h3>
    <hr>
    <div v-if="islogin">你好，登录成功！</div>
    <div v-else>你好，请先登录！</div>
</div>

<script>
    //v-if v-else 一般都是成对出现 ，在前端做判断 用
    //v-show 和 v-if类似 区别是：v-if 为false时 完全不加载 元素对象(不对服务器请求，减轻压力)  ，而 v-show 仅仅是对css的操作（操作流畅）
    var data = {
        message:"v-if,v-else,v-show练习",
        islogin:1
    };

    var app = new Vue({
        el:'#app',
        data:data
    });

</script>

</body>
</html>